iT邦幫忙

2022 iThome 鐵人賽

DAY 12
0
自我挑戰組

清空我的最愛之前端筆記系列 第 12

[ Day 12 ] [ JS ] Require 與 Import 的區別

  • 分享至 

  • xImage
  •  

今天是第 12 天,不知大家有沒有遇過,如果要引入文件的時候,有時候是用 require,有時候是用 import,像我就是在 Node.js 使用 require,Vue.js 是用 import。
同樣是引入,那這兩者有什麼差別呢?我想趁這個機會來簡單筆記一下,並分享給大家~~

require/exports

2010 年前後,出生在野生規範,也就是 JavaScript 社群的開發者們自己擬定的規範,並且被大家廣泛地使用。遵循的是 CommonJS 規範,是為伺服器端開發設計的,而 Node.js 是 CommonJS 規範的實現。
CommonJS 規範是以同步的方式載入模組,換句話說,要載入完成後,才能執行後面的操作。

運行時動態加載,是為賦值的過程,把 require 的結果 ( String、Number、Function、Object 等 ) 輸出並賦值給某個變數。

輸出的是值的拷貝,
其中當輸出的是基本型別時,屬於值的拷貝;
當輸出的是物件型別時,屬於物件的淺拷貝。
CommonJS 默認 export 的是物件,即使輸出的是基本型別。

const file = require('file')
exports.file = file
module.exports = file

import/exports

2015 年,為 ES6 Modules,在 ES6 新加進來的。

靜態編譯,在編譯過程中執行。

輸出的是值的引用。
不管是基本或是物件型別,都只能讀取引用。

如果遇到不支援 ES6 的情況下,就需要 webpacker + babel 來轉譯成 require/exports。

import file from 'file'  // 引入只有一個模組且不具名的檔案,並重新賦予名稱(file)
import * from 'file'  // 引入全部模組
import { default as file } from 'fs'  // 引入 export default 的模組
import { * as file } from 'fs'  // 全部引入並重新賦予名稱(file)
import { moduleName as file } from 'fs'  // 引入名為 moduleName 的模組,並重新賦予名稱(file)
import { moduleName } from 'fs'  // 引入名為 moduleName 的模組
import { moduleName1, moduleName2 } from 'fs'  // 同時引入多個模組

export default file
export const moduleName
export function moduleName
export { moduleName1, moduleName2 }
export * from 'file'

今天比較匆忙(汗),如果有誤,敬請指教^^

參考資料:
require和import差異
js使用require 和 import 引入依賴的區別?
require,import區別?

文章同步更新於 medium


上一篇
[ Day 11 ] [ JS ] 使用 JavaScript 操作 Pseudo-elements 偽元素
下一篇
[ Day 13 ] [ JS ] 認識 Console 常用語法 (1)
系列文
清空我的最愛之前端筆記16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言